<template>
  <div>
    <van-nav-bar
      title="拜访记录"
      left-arrow
      right-text="新增"
      @click-left="$router.push('/myClients')"
      @click-right="addClick"
    />

    <!-- 搜索 -->
    <van-search
      v-model="value"
      placeholder="客户名称/拜访标题"
      shape="round"
      show-action
    >
      <template #action>
        <div style="color: #003399">搜索</div>
      </template>
    </van-search>

     <div class="box">
       <div class="Business-content">
           <ul>
               <li >
                   <img src="../../assets/images/旗下企业-头像.png" alt="">

                   <div class="content-center">
                       <h2> <span> 拜访标题 </span> 重要商务会议拜访</h2>
                       <p> <span> 客户名称</span>  林丹</p>
                        <h3><span>拜访时间</span>  2018-10-25 14:30</h3>
                   </div>

                    <div class="content-r">
                        定期回访
                   </div>
               </li>
                 <li >
                   <img src="../../assets/images/旗下企业-头像.png" alt="">

                   <div class="content-center">
                       <h2> <span> 拜访标题 </span> 重要商务会议拜访</h2>
                       <p> <span> 客户名称</span>  林丹</p>
                        <h3><span>拜访时间</span>  2018-10-25 14:30</h3>
                   </div>

                    <div class="content-r">
                        定期回访
                   </div>
               </li>
           </ul>
       </div>
    </div>

<div @click="showAll = !showAll" class="show-more">{{word}}⏷</div>
    

  </div>
</template>

<script>
// import {visitlist} from '../../request/api'
export default {
  data() {
    return {value:""};
  },
  created(){
      visitlist({
          current:1,
          size:20
      }).then(res=>{
          if(res.errCode==0){
              console.log(res);
          }
          
      })
  },
  methods: {
    // 新增
    addClick() {},
  },

     computed:{
  showList(){
   if(this.showAll == false){          //当数据不需要完全显示的时候
    var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
    if(this.custArr.length > 3){　　　　　　　//这里我们先显示前三个
     for(var i=0;i<3;i++){
      showList.push(this.custArr[i])
     }
    }else{
     showList = this.custArr
    }
    return showList;　　　　　　　　　　　　　　　　 //返回当前数组
   }else{
    return this.custArr;
   }
  },
  word(){
   if(this.showAll == false){　　　　　　　　　　　//对文字进行处理
    return '展开更多'
   }else{
    return '点击收起'
   }
  }
 }
};
</script>
 
<style lang = "less" scoped>
/deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}


.Business-content{
   border-radius: 5px;
   background-color: #fff;
   ul{
       padding: 10px 0 ;
       li{
           display: flex;
           justify-content: flex-start;
           align-items: center;
           padding: 10px;
           /* margin-bottom: 10px; */
           border-bottom: 1px solid #e5e5e5;
           position: relative;
           img{
               width: 50px;
           }
            .content-center{
                margin: 0 10px;
                font-size: 12px;
                p{
                    margin:5px 0 ;
                    font-size: 12px;
                    
                }
                span{
                    font-size: 12px;
                    color: #999;
                    margin-right: 5px;
                }
            }
           .content-r{
               position: absolute;
               top: 10px;
               right: 20px;
               font-size: 12px;
               border: 1px solid orange;
               border-radius: 2px;
               padding: 3px;
               background-color: rgb(251, 245, 236);
               color: orange;
           }
       }
   }
}

.show-more{
    width: 100%;
    color: #4a68e1;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
}
</style>